<!DOCTYPE html>
<!--
 * @Author: 波波
 * @Date: 2025-06-25 20:04:53
 * @Email: guqule2@yeah.net
 * @LastEditors: 波波
 * @LastEditTime: 2025-06-26 05:26:27
 * @Description: 丸子社区-专注分享交流的社区平台，连接你我
 * @Company: 丸子社区
-->
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title('|', true, 'right'); ?></title>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/tailwindcss.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/tailwind-config.js"></script>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/custom.css">
    <?php wp_head(); ?>
</head>

<body class="font-inter bg-neutral-100 text-neutral-800 flex flex-col min-h-screen">
    <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 shadow-sm">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- Logo -->
                <div class="flex-shrink-0">
                    <a href="<?php echo esc_url(home_url('/')); ?>" class="flex items-center space-x-2">
                        <?php
                        $logo_url = wanzi_option('g_logo');
                        if ($logo_url) :
                        ?>
                            <img src="<?php echo esc_url($logo_url); ?>" alt="<?php bloginfo('name'); ?>" class="h-10 w-auto">
                        <?php else : ?>
                            <span class="text-2xl font-bold text-neutral-800"><?php bloginfo('name'); ?></span>
                        <?php endif; ?>
                    </a>
                </div>



                <!-- 导航链接 - 桌面端 -->
                <nav class="hidden md:flex space-x-8">
                    <?php wp_nav_menu(array(
                        'theme_location' => 'primary',
                        'menu_class' => 'flex space-x-8 group',
                        'container' => false,
                        'depth' => 2,
                        'walker' => new Walker_Nav_Menu(),
                        'items_wrap' => '<ul class="%2$s">%3$s</ul>',
                        'fallback_cb' => false
                    )); ?>
                </nav>

                <!-- 右侧操作区 -->
                <div class="flex items-center space-x-4">
                    <button class="p-2 rounded-full hover:bg-neutral-100 transition-colors relative">
                        <i class="fa fa-search text-neutral-600"></i>
                    </button>
                    <a href="<?php echo esc_url(home_url('/message-center')); ?>" class="hidden sm:block p-2 rounded-full hover:bg-neutral-100 transition-colors relative">
                        <i class="fa fa-bell text-neutral-600"></i>
                        <span class="absolute top-1 right-1 h-2 w-2 rounded-full bg-red-500"></span>
                    </a>

                    <?php if (is_user_logged_in()) : ?>
                        <?php $current_user = wp_get_current_user(); ?>
                        <!-- 用户头像 -->
                        <div class="relative hidden sm:block">
                            <button id="desktop-user-menu-button" class="flex items-center space-x-2 focus:outline-none">
                                <div class="w-9 h-9 rounded-full overflow-hidden border-2 border-primary">
                                    <?php echo get_avatar($current_user->ID, 36, '', '', array('class' => 'w-full h-full object-cover')); ?>
                                </div>
                                <span class="font-medium text-sm"><?php echo esc_html($current_user->display_name); ?></span>
                                <i class="fa fa-angle-down text-neutral-500"></i>
                            </button>

                            <!-- 用户下拉菜单 -->
                            <div id="desktop-user-menu" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-10 hidden animate-fade-in">
                                <?php if (current_user_can('manage_options')) : ?>
                                    <a href="<?php echo admin_url(); ?>" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 transition-colors">
                                        <i class="fa fa-dashboard mr-2"></i>仪表盘
                                    </a>
                                <?php endif; ?>
                                <a href="<?php echo esc_url(home_url('/user-center')); ?>" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 transition-colors">
                                    <i class="fa fa-user-o mr-2"></i>个人中心
                                </a>
                                <a href="<?php echo esc_url(home_url('/user-center#settings')); ?>" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 transition-colors">
                                    <i class="fa fa-cog mr-2"></i>账号设置
                                </a>
                                <a href="<?php echo esc_url(home_url('/message-center')); ?>" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 transition-colors">
                                    <i class="fa fa-bell-o mr-2"></i>消息通知
                                </a>
                                <div class="border-t border-neutral-200 my-1"></div>
                                <a href="<?php echo wp_logout_url(home_url()); ?>" class="block px-4 py-2 text-sm text-red-600 hover:bg-neutral-100 transition-colors">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </a>
                            </div>
                        </div>
                    <?php else : ?>
                        <a href="<?php echo wp_login_url(); ?>" class="hidden sm:flex items-center space-x-2 px-4 py-2 rounded-full bg-primary text-white hover:bg-primary/90 transition-colors">
                            <i class="fa fa-user-circle-o"></i>
                            <span>登录</span>
                        </a>
                    <?php endif; ?>

                    <!-- 移动端菜单按钮 -->
                    <button id="mobile-menu-button" class="md:hidden p-2 rounded-md text-neutral-600 hover:text-primary hover:bg-neutral-100 focus:outline-none">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            // 默认隐藏所有二级菜单
                            const subMenus = document.querySelectorAll('#mobile-menu .sub-menu');
                            subMenus.forEach(menu => {
                                menu.style.display = 'none';
                            });

                            // 为一级菜单项添加点击事件
                            const menuItems = document.querySelectorAll('#mobile-menu .menu-item-has-children > a');
                            menuItems.forEach(item => {
                                item.addEventListener('click', function(e) {
                                    e.preventDefault();
                                    const subMenu = this.nextElementSibling;
                                    if (subMenu.style.display === 'none') {
                                        subMenu.style.display = 'block';
                                    } else {
                                        subMenu.style.display = 'none';
                                    }
                                });
                            });

                            // 用户菜单下拉
                            const userMenuButton = document.getElementById('user-menu-button');
                            const userMenu = document.getElementById('user-menu');
                            if (userMenuButton) {
                                userMenuButton.addEventListener('click', (event) => {
                                    event.stopPropagation();
                                    userMenu.classList.toggle('hidden');
                                });

                                document.addEventListener('click', (e) => {
                                    if (userMenu && !userMenu.classList.contains('hidden') && !userMenu.contains(e.target) && !userMenuButton.contains(e.target)) {
                                        userMenu.classList.add('hidden');
                                    }
                                });
                            }

                            // Desktop User Menu Dropdown by Click
                            const desktopUserMenuButton = document.getElementById('desktop-user-menu-button');
                            const desktopUserMenu = document.getElementById('desktop-user-menu');

                            if (desktopUserMenuButton) {
                                desktopUserMenuButton.addEventListener('click', function(event) {
                                    event.stopPropagation();
                                    desktopUserMenu.classList.toggle('hidden');
                                });
                            }

                            // Mobile Menu Slide-in
                            const mobileMenu = document.getElementById('mobile-menu');
                            const mobileMenuButton = document.getElementById('mobile-menu-button');
                            const mobileMenuCloseButton = document.getElementById('mobile-menu-close-button');

                            if (mobileMenuButton) {
                                mobileMenuButton.addEventListener('click', function(event) {
                                    event.stopPropagation();
                                    mobileMenu.classList.remove('-translate-x-full');
                                });
                            }
                            
                            if (mobileMenuCloseButton) {
                                mobileMenuCloseButton.addEventListener('click', function(event) {
                                    event.stopPropagation();
                                    mobileMenu.classList.add('-translate-x-full');
                                });
                            }

                            document.addEventListener('click', function(event) {
                                if (desktopUserMenu && !desktopUserMenu.classList.contains('hidden')) {
                                    const isClickInsideButton = desktopUserMenuButton.contains(event.target);
                                    const isClickInsideMenu = desktopUserMenu.contains(event.target);
                                    if (!isClickInsideButton && !isClickInsideMenu) {
                                        desktopUserMenu.classList.add('hidden');
                                    }
                                }

                                if (mobileMenu && !mobileMenu.classList.contains('-translate-x-full')) {
                                    const isClickInsideMenu = mobileMenu.contains(event.target);
                                    const isClickInsideButton = mobileMenuButton.contains(event.target);
                                    if (!isClickInsideMenu && !isClickInsideButton) {
                                        mobileMenu.classList.add('-translate-x-full');
                                    }
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>

        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="fixed inset-0 bg-white/95 backdrop-blur-sm z-50 transform -translate-x-full transition-transform duration-300 ease-in-out md:hidden">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 h-full flex flex-col">
                <div class="flex justify-between items-center h-16 border-b border-neutral-200">
                    <a href="<?php echo esc_url(home_url('/')); ?>" class="flex items-center space-x-2">
                        <?php
                        $logo_url = wanzi_option('g_logo');
                        if ($logo_url) :
                        ?>
                            <img src="<?php echo esc_url($logo_url); ?>" alt="<?php bloginfo('name'); ?>" class="h-10 w-auto">
                        <?php else : ?>
                            <span class="text-2xl font-bold text-neutral-800"><?php bloginfo('name'); ?></span>
                        <?php endif; ?>
                    </a>
                    <button id="mobile-menu-close-button" class="p-2 rounded-md text-neutral-600 hover:text-primary hover:bg-neutral-100 focus:outline-none">
                        <i class="fa fa-close text-2xl"></i>
                    </button>
                </div>

                <div class="flex-1 flex flex-col justify-center">
                    <div class="px-4 py-3 space-y-4">
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'space-y-4 text-center text-xl font-medium', 'container' => false ) ); ?>
                        <div class="pt-6 border-t border-neutral-200">
                            <?php if ( is_user_logged_in() ) : ?>
                                <?php $current_user = wp_get_current_user(); ?>
                                <div class="text-center mb-6">
                                    <?php echo get_avatar( $current_user->ID, 64, '', '', array('class' => 'rounded-full inline-block mb-3 border-2 border-primary p-1') ); ?>
                                    <div>
                                        <p class="font-semibold text-neutral-800 text-lg"><?php echo esc_html( $current_user->display_name ); ?></p>
                                    </div>
                                </div>
                                <div class="space-y-3">
                                    <?php if (current_user_can('manage_options')) : ?>
                                        <a href="<?php echo admin_url(); ?>" class="flex items-center justify-center space-x-3 px-4 py-3 rounded-lg text-base font-medium text-neutral-700 hover:text-primary hover:bg-neutral-100 transition-all duration-200">
                                            <i class="fa fa-dashboard fa-fw"></i><span>仪表盘</span>
                                        </a>
                                    <?php endif; ?>
                                    <a href="<?php echo esc_url(home_url('/user-center')); ?>" class="flex items-center justify-center space-x-3 px-4 py-3 rounded-lg text-base font-medium text-neutral-700 hover:text-primary hover:bg-neutral-100 transition-all duration-200">
                                        <i class="fa fa-user-o fa-fw"></i><span>个人中心</span>
                                    </a>
                                    <a href="<?php echo get_edit_user_link(); ?>" class="flex items-center justify-center space-x-3 px-4 py-3 rounded-lg text-base font-medium text-neutral-700 hover:text-primary hover:bg-neutral-100 transition-all duration-200">
                                        <i class="fa fa-cog fa-fw"></i><span>编辑资料</span>
                                    </a>
                                    <a href="<?php echo wp_logout_url(home_url()); ?>" class="flex items-center justify-center space-x-3 px-4 py-3 rounded-lg text-base font-medium text-red-600 hover:bg-red-50 transition-all duration-200">
                                        <i class="fa fa-sign-out fa-fw"></i><span>退出登录</span>
                                    </a>
                                </div>
                            <?php else : ?>
                                <a href="<?php echo wp_login_url(); ?>" class="w-full flex items-center justify-center space-x-2 px-4 py-3 rounded-full bg-primary text-white hover:bg-primary/90 transition-colors text-lg font-semibold">
                                    <i class="fa fa-user-circle-o"></i>
                                    <span>登录/注册</span>
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div id="search-modal">
        <div class="modal-content">
            <button id="close-search-modal" class="close-button">×</button>
            <input type="text" class="search-box" placeholder="输入搜索内容...">
            <div id="search-results"></div>
        </div>
    </div>